<%--
  Created by IntelliJ IDEA.
  User: 陈伯维
  Date: 2021/3/9
  Time: 22:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册页面</title>
  <style type="text/css">
    /*将所有标签默认的内外边距清除*/
    *{
      margin: 0px;
      padding: 0px;
      /*元素宽由width=content变为content+padding+border*/
      box-sizing: border-box;
    }
    html{
      height: 100%;
    }
    body{ /*背景图片 不重复铺设 居中*/
      background:url("img/rg_bg.jpg") no-repeat center ;
      background-size: 100% 100% ;
    }
    .rg_layout{  /*设置注册表布局框，背景颜色白色，分为三部分*/
      width: 900px;
      height: 550px;
      border: 8px solid #EEEEEE;
      background-color: white;
      /*--让div水平居中auto*/
      margin: auto;

      margin-top: 80px;

    }
    .rg_left{  /*白色注册框中左边部分*/
      /*border: 1px solid red;*/
      float: left;
      margin: 15px;
    }
    /*设置左部分p标签中文字属性*/
    .rg_left >p:first-child{ /*该类选择器下第一个p标签以及最后一个标签*/
      color:#FFD026;
      font-size: 20px;

    }
    .rg_left>p:last-child{
      color:#A6A6A6;
      font-size: 20px;

    }
    /*白色注册框中间部分*/
    .rg_center{
      /*border: 1px solid red;*/
      float: left;
      width: 540px;
    }
    /*白色注册框右边部分*/
    .rg_right{
      /*border: 1px solid red;*/
      float: right;
      margin: 15px;
    }
    /*白色注册框右边部分文字属性*/
    .rg_right>p:first-child{
      font-size: 15px;
    }
    .rg_right p a{
      color: pink;
    }
    .td_left{ /*设置注册表左列元素的属性文本右对齐以及宽高*/
      width: 100px;
      text-align: right;/*文本右对齐*/
      height: 45px;
    }
    .td_right{/*设置注册表右列左内边距使input组件与右列左边界有空间*/
      padding-left: 50px;
    }/*并集选择器*/
    #username,#password,#email,#company,#majory,#tel,#birthday{/*设置注册表右列input组件属性并让里面文字有左边距*/
      width: 251px;
      height: 32px;
      border: 1px solid #A6A6A6; /*灰色*/
      border-radius: 5px; /*设置圆角*/
      padding-left: 10px; /*设置input组件内左边距*/

    }

    #btn_sub{   /*注册按钮属性设置*/
      width: 150px;
      height: 40px;
      background-color: #FFD026;
      border: 1px solid #FFD026;/*消除边框(颜色与按钮背景颜色同)*/
    }
    .error{    /*用户名密码验证失败所显示的文字的属性*/
      color: red;
    }
    #td_sub{  /*设置注册按钮在该行中的位置，用内边距*/
      padding-left: 150px;

    }
  </style>
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript">

    //校验手机号
    function checkPhoneNum(){
      var tel=$("input[name='tel']").val();
      if(tel==''){
        $("span[id='s_tel']").html("手机不为空！").css("color", "red");
        return false;
      }else if(/^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/.test(tel)==false){
        $("span[id='s_tel']").html("手机不合法！").css("color", "red");
        return false;
      }
      $("span[id='s_tel']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
      return true;
    }

    //校验专业表单项非空
    function checkMajory(){
      //获取表单项值
      var majory=$("input[name='majory']").val();
      if(majory==''){
        $("span[id='s_majory']").html("专业不为空！").css("color", "red");
        return false;
      }
      $("span[id='s_majory']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
      return true;
    }


    //校验院校表单项非空
    function checkCompany(){
      var company=$("input[name='company']").val();
      if(company==''){
        $("span[id='s_company']").html("院校不为空！").css("color", "red");
        return false;
      }
      $("span[id='s_company']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
      return true;
    }

    //校验邮箱方法
    function checkEmail(){
      //1.获取邮箱内容
      var email=$("input[name='email']").val();
      if(email==''){
        $("span[id='s_email']").html("邮箱不为空！").css("color", "red");
        return false;
      }else if(/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(email) == false){
        $("span[id='s_email']").html("邮箱不合法！").css("color", "red");
        return false;
      }
      $("span[id='s_email']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
      return true;
    }


    //校验密码方法
    function checkPassword(){
      //1.获取密码的值(文本输入框值)，通过name找value
      var password=$("input[name='password']").val();
      if(password==''){
        $("span[id='s_password']").html("密码不为空！").css("color", "red");
        return false;
      }else if(/^[a-zA-z]\w{5,}/.test(password) == false){
        $("span[id='s_password']").html("密码不合法！").css("color", "red");
        return false;
      }
      $("span[id='s_password']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
      return true;
    }


    //校验用户名方法
    function checkUserName(){
      //1.获取用户名的值(文本输入框值),通过name找value
      var username=$("input[name='username']").val();
      if(username==''){
        $("span[id='s_username']").html("用户名不为空！").css("color", "red");
        return false;
      }else if(username.length<3){
        $("span[id='s_username']").html("用户名不合法！").css("color", "red");
        return false;
      }
      $("span[id='s_username']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
      return true;
    }

    //就绪事件，页面都加载完成后开始执行下面代码
    $(function(){
      //给input表单项绑定离焦事件
      $("input[name='username']").blur(function(){
        checkUserName();
      });
      $("input[name='password']").blur(function(){
        checkPassword();
      });
      $("input[name='email']").blur(function(){
        checkEmail();
      });
      $("input[name='company']").blur(function(){
        checkCompany();
      });
      $("input[name='majory']").blur(function(){
        checkMajory();
      });

      $("input[name='tel']").blur(function(){
        checkPhoneNum();
      });
      //给表单绑定提交事件，只有返回true表单才会提交
      $("#form").submit(function() {
        return checkUserName() && checkPassword() && checkEmail()() && checkCompany() && checkMajory() && checkPhoneNum();
      });
    })

  </script>
</head>
<body class="body">
<div class="rg_layout">
  <div class="rg_left">
    <p >新用户注册</p>
    <p> USER LOGIN</p>
  </div>
  <div class="rg_center">
    <div class="rg_form">
      <!--定义表单form-->
      <form action="/register" method="post" id="form">
        <table >
          <tr>
            <td class="td_left"><label for="username">用户名</label></td>
            <td class="td_right">
              <input type="text" name="username" id="username" placeholder="请输入用户名">
              <span id="s_username" class="error"></span>
            </td>
          </tr>
          <tr>
            <td class="td_left"><label for="password">密码</label></td>
            <td class="td_right">
              <input type="password" name="password" id="password" placeholder="请输入密码">
              <span id="s_password"class="error"></span>
            </td>
          </tr>
          <tr>
            <td class="td_left"><label for="email">Email</label></td>
            <td class="td_right">
              <input type="email" name="email" id="email" placeholder="请输入邮箱">
              <span id="s_email"class="error"></span>
            </td>

          </tr>
          <tr>
            <td class="td_left"><label for="company">院校</label></td>
            <td class="td_right">
              <input type="text" name="company" id="company" placeholder="请输入院校">
              <span id="s_company"class="error"></span>
            </td>
          </tr>
          <tr>
            <td class="td_left"><label for="majory">专业</label></td>
            <td class="td_right">
              <input type="text" name="majory" id="majory" placeholder="请输入专业">
              <span id="s_majory" class="error"></span>
            </td>
          </tr>
          <tr>
            <td class="td_left"><label for="tel">手机号</label></td>
            <td class="td_right">
              <input type="tel" name="tel" id="tel" placeholder="请输入手机号">
              <span id="s_tel"class="error"></span>
            </td>
          </tr>
          <tr>
            <td class="td_left"><label>性别</label></td>
            <td class="td_right"><input type="radio" name="gender" value="male">男
              <input type="radio" name="gender" value="female">女
            </td>
          </tr>
          <tr>
            <td class="td_left"><label for="birthday">出生日期</label></td>
            <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
          </tr>
          <tr>
            <td class="td_left"><label>参赛语言</label></td>
            <td class="td_right">
              <select name="language">
                <option value="C++">C++</option>
                <option value="Java">Java</option>
                <option value="JavaScript">JavaScript</option>
                <option value="Python">Python</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="td_left"><label >协议</label></td>
            <td class="td_right"><textarea rows="1">1. 参加全国竞赛的项目从省级竞赛获奖项目按规定名额择优推荐。2. 申报项目必须是从当年7月1日往前推不超过两年时间内完成的。</textarea></td>
          </tr>
          <td colspan="2" id="td_sub"><input type="submit" value="提交" id="btn_sub"></td>
          </tr>
        </table>
      </form>
    </div>
  </div>
  <div class="rg_right">
    <p>已有账号<a href="login1.jsp" style="color: #FFD026" >立即登录</a></p>
  </div>
</div>
</body>
</html>
